<template>
  <div>
    <el-button
      style="margin-top: 10px;margin-left: 10px"
      type="primary"
      icon="el-icon-edit"
      size="mini"
      @click="openDialog">添加</el-button>
    <el-tabs
      class="task-el-tabs"
      v-model="activeName"
      @tab-click="handleClick"
      type="border-card"
    >
      <el-tab-pane label="代办任务" name="first">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="任务">
            <template slot-scope="scope">
              <el-tooltip
                class="tooltip-item"
                effect="light"
                content="提示文字"
                placement="right">
                <p class="tooltip-item-p">{{ scope.row.task }}</p>
              </el-tooltip>
              <el-button
                icon="el-icon-info"
                @click="centerDialogVisible = true"
                circle
                style="padding: 2px"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="协助人员" width="110" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开始时间" width="180" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time"/>
              {{ scope.row.start_time }}
            </template>
          </el-table-column>
          <el-table-column label="截止时间" width="180" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time"/>
              <span>{{ scope.row.end_time }}</span>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="备注" width="110" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="状态" width="110" align="center">
            <template slot-scope="scope">
              <el-tag :type="'warning'">未完成</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已办任务" name="se">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="任务">
            <template slot-scope="scope">
              <el-tooltip
                class="tooltip-item"
                effect="light"
                content="提示文字"
                placement="right">
                <p class="tooltip-item-p">{{ scope.row.task }}</p>
              </el-tooltip>
              <el-button
                icon="el-icon-info"
                @click="centerDialogVisible = true"
                circle
                style="padding: 2px"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="协助人员" width="110" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开始时间" width="180" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time"/>
              {{ scope.row.start_time }}
            </template>
          </el-table-column>
          <el-table-column label="截止时间" width="180" align="center">
            <template slot-scope="scope">
              <i class="el-icon-time"/>
              <span>{{ scope.row.end_time }}</span>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="备注" width="110" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="状态" width="110" align="center">
            <template slot-scope="scope">
              <el-tag :type="'success'">已完成</el-tag>
<!--              <el-tag :type="scope.row.status === '已完成'?'success':'warning'">{{ scope.row.status }}</el-tag>-->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="人员列表" name="third">
        人员列表
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="详情"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-progress :text-inside="true" :stroke-width="20" :percentage="70" style="margin: 5px 0"></el-progress>
      <el-progress :text-inside="true" :stroke-width="20" :percentage="100" status="success" style="margin: 5px 0"></el-progress>
      <el-progress :text-inside="true" :stroke-width="20" :percentage="80" status="warning" style="margin: 5px 0"></el-progress>
      <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception" style="margin: 5px 0"></el-progress>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTaskList } from '@/api/table'

export default {
  name: 'Task',
  data() {
    return {
      centerDialogVisible: false,
      activeName: 'first',
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getTaskList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    openDialog() {
      //
    }
  }
}
</script>
<style lang="scss" scoped>
.task-el-tabs {
  margin: 10px;
  padding: 5px;
}
.tooltip-item{
}
.tooltip-item-p{
  display: inline-block;
  margin: 0 5px;
}
</style>
